<?php

require_once 'network.php';

//网页授权的步骤
//1.构建特殊的链接, 引导用户点击
//普通授权的链接:
//https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx962aa402ac18e236&redirect_uri=http://1.mobius.applinzi.com/count-money/index.php&response_type=code&scope=snsapi_userinfo&state=929#wechat_redirect

//2.用户点击同意授权后, 获取code
$code = $_GET["code"];
echo $code . "<hr>";

//3.通过code值换取access_token
$appid = "wx962aa402ac18e236";
$secret = "064f7a27f0b0b88a0e9173d53f050e76";
$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$secret}&code={$code}&grant_type=authorization_code";
$json = httpGet($url);
echo $json . "<hr>";
$obj = json_decode($json);
$access_token = $obj->access_token;
$openid = $obj->openid;
echo $access_token . "<hr>";
echo $openid . "<hr>";

//4.获取用户的信息
$url = "https://api.weixin.qq.com/sns/userinfo?access_token={$access_token}&openid={$openid}&lang=zh_CN";
$json = httpGet($url);
echo $json . "<hr>";
$obj = json_decode($json);
$nickname = $obj->nickname;
$headimgurl = $obj->headimgurl;
echo $nickname . "<hr>";
echo $headimgurl . "<hr>";

?>

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <title>数钱</title>
</head>
<body>
<!--把php中的数据保存的html元素中, 这样js可以获取html元素中的数据-->
<input type="hidden" id="nickname" value="<?php echo $nickname; ?>"/>
<input type="hidden" id="openid" value="<?php echo $openid; ?>"/>
<input type="hidden" id="headimgurl" value="<?php echo $headimgurl; ?>"/>
<!--加载页面-->
<div id="loading-wrap">
    <div id="loading">0%</div>
</div>
<!--第一页-->
<div id="page1">
    <img class="animated bounceIn" id="p1-challenge" src="img/tiaozhan.png"/>
    <img class="animated wobble" id="p1-slogan" src="img/yingqu.png"/>
    <img class="animated hinge infinite" id="p1-money" src="img/qian.png"/>
    <img class="animated pulse infinite" id="p1-start" src="img/start_game.png"/>
    <img class="animated fadeOut infinite" id="p1-hand" src="img/shou.png"/>
    <!--导航栏-->
    <img class="button-wrap" src="img/p1_btns_wrap.png"/>
    <img class="rank-button" src="img/ranking.png"/>
    <img class="rule-button" src="img/activity_rule.png"/>
    <img class="prize-button" src="img/prize.png"/>
    <img class="explain-button" src="img/shiyong.png"/>
</div>
<!--第二页-->
<div id="page2">
    <img id="p2-frame" src="img/p2_kuang.png"/>
    <img id="p2-text" src="img/p2_txt1.png"/>
    <div id="time">
        <span class="time-number">0</span>
        <span class="time-number">0</span>
        <span class="time-number">0</span>
        <span class="time-clock">60</span>
    </div>
    <img id="p2-money" src="img/p2_qian.jpg"/>
    <img id="p2-block" src="img/p2_zhuan.png"/>
    <img class="animated fadeInUp infinite" id="p2-hand" src="img/p2_shou.png"/>
</div>
<!--第三页-->
<div id="page3">
    <img id="p3-acquire" src="img/p3_acquire.png"/>
    <p id="p3-money">￥0</p>
    <p id="p3-result">没有办法! 你已经强到没有对手了!</p>
    <p id="p3-best">我的辉煌战绩:￥0 当前排名:0位</p>
    <img id="p3-again" src="img/p3_again.png"/>
    <img id="p3-share" src="img/p3_share_btn.png"/>
    <!--导航栏-->
    <img class="button-wrap" src="img/p1_btns_wrap.png"/>
    <img class="rank-button" src="img/ranking.png"/>
    <img class="rule-button" src="img/activity_rule.png"/>
    <img class="prize-button" src="img/prize.png"/>
    <img class="explain-button" src="img/shiyong.png"/>
</div>
<!--弹出页-->
<!--1.填写资料-->
<div class="alert-wrap" id="info-alert">
    <!--关闭按钮-->
    <img class="close-button" src="img/close.png"/>
    <form>
        <input type="text" placeholder="姓名"/>
        <input type="text" placeholder="电话"/>
        <input type="text" placeholder="地址"/>
        <input type="button" value=""/>
    </form>
</div>
<!--2.数钱榜-->
<div class="alert-wrap" id="rank-alert">
    <!--关闭按钮-->
    <img class="close-button" src="img/close.png"/>
    <div id="rank-wrap">
        <ul>
            <li>
                <span class="rank-number"></span>
                <span class="rank-photo"><img src="img/close.png"/></span>
                <span class="rank-name">张三</span>
                <span class="rank-score">0分</span>
            </li>
            <li>
                <span class="rank-number"></span>
                <span class="rank-photo"><img src="img/close.png"/></span>
                <span class="rank-name">张三</span>
                <span class="rank-score">0分</span>
            </li>
            <li>
                <span class="rank-number"></span>
                <span class="rank-photo"><img src="img/close.png"/></span>
                <span class="rank-name">张三</span>
                <span class="rank-score">0分</span>
            </li>
            <li>
                <span class="rank-number">4</span>
                <span class="rank-photo"><img src="img/close.png"/></span>
                <span class="rank-name">张三</span>
                <span class="rank-score">0分</span>
            </li>
            <li>
                <span class="rank-number">5</span>
                <span class="rank-photo"><img src="img/close.png"/></span>
                <span class="rank-name">张三</span>
                <span class="rank-score">0分</span>
            </li>
        </ul>
    </div>
</div>
<!--3.活动规则-->
<div class="alert-wrap" id="rule-alert">
    <!--关闭按钮-->
    <img class="close-button" src="img/close.png"/>
    <div class="alert-content">
        <h2>活动规则</h2>
        <p>
            1、每人有多次游戏机会，但成绩只能提交一次，且提交之后不能更改！<br/>
            2、提交成绩时要提供姓名及手机号码作为兑奖凭证，因用户本人未在规定时间内提供正确的手机号码造成的奖品损失，由用户个人承担。 <br/>
            3、活动时间为2016年5月11日-5月19日24:00，活动结束后将在“雾灵山庄”微信公布中奖名单。<br/>
            4、获奖规则：系统将根据大家提交的成绩，按照由多到少的规则进行排行，排名第1的网友将获得一等奖，排名第2-第21位的网友将分获二等奖，以此类推。
            5、奖品的发放：活动结束后，将由工作人员与您取得联系，并将相应的卡券编号发送到您提供的手机号码上。
        </p>
    </div>
</div>
<!--4.活动奖品-->
<div class="alert-wrap" id="prize-alert">
    <!--关闭按钮-->
    <img class="close-button" src="img/close.png"/>
    <div class="alert-content">
        <h2>活动奖品</h2>
        <p>
            一等奖1人：价值1488元7号楼1晚豪华标间免费房券1张，并可享康体项目3折优惠；<br/><br/>
            二等奖20人：100元订房代金券每人1张，并可享康体项目4折优惠；<br/><br/>
            三等奖50人：50元订房代金券每人1张，并可享康体项目5折优惠。<br/><br/>
            奖品的有效期：2016年5月20日至6月15日（周五、周六及法定节假日不可用）
        </p>
    </div>
</div>
<!--5.用券使用说明-->
<div class="alert-wrap" id="explain-alert">
    <!--关闭按钮-->
    <img class="close-button" src="img/close.png"/>
    <div class="alert-content">
        <h2>奖券使用说明</h2>
        <p>
            1、每人有多次游戏机会，但成绩只能提交一次，且提交之后不能更改！<br/>
            2、提交成绩时要提供姓名及手机号码作为兑奖凭证，因用户本人未在规定时间内提供正确的手机号码造成的奖品损失，由用户个人承担。<br/>
            3、活动时间为2016年5月11日-5月19日24:00，活动结束后将在“雾灵山庄”微信公布中奖名单。<br/>
            4、获奖规则：系统将根据大家提交的成绩，按照由多到少的规则进行排行，排名第1的网友将获得一等奖，排名第2-第21位的网友将分获二等奖，以此类推。<br/>
            5、奖品的发放：活动结束后，将由工作人员与您取得联系，并将相应的卡券编号发送到您提供的手机号码上。<br/>
        </p>
    </div>
</div>
<!--6.分享-->
<div class="alert-wrap" id="share-alert">
    <img id="share" src="img/p3_share.png"/>
</div>
<!--引入js文件-->
<script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/touch.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
